<template>
    <div class="pickup-list">
        <div class="page-header">
            <el-button type="primary" @click="router.push({path:'/main/pickup/edit'})">
                <el-icon><Plus /></el-icon>
                添加自提点
            </el-button>
            <el-button @click="getList">
                <el-icon><Refresh /></el-icon>
                刷新
            </el-button>
        </div>

        <div class="content-container">
            <div class="filter-panel">
                <el-card>
                    <template #header>
                        <div class="card-header">
                            <span>筛选过滤</span>
                        </div>
                    </template>
                    <el-form :model="filter" label-width="80px">
                        <el-form-item label="名称">
                            <el-input v-model="filter.name" placeholder="自提点名称" />
                        </el-form-item>
                        <el-form-item label="状态">
                            <el-select v-model="filter.status" placeholder="请选择">
                                <el-option label="全部" value="" />
                                <el-option label="启用" value="1" />
                                <el-option label="禁用" value="0" />
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search">
                                <el-icon><Filter /></el-icon>
                                筛选
                            </el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>

            <div class="table-panel">
                <el-card>
                    <template #header>
                        <div class="card-header">
                            <span>自提点列表</span>
                        </div>
                    </template>

                    <el-table :data="displayList" stripe style="width: 100%">
                        <el-table-column type="selection" width="55" />
                        <el-table-column prop="name" label="名称" />
                        <el-table-column prop="phone" label="电话" width="120" />
                        <el-table-column prop="detail" label="地址" />
                        <el-table-column prop="status" label="状态" width="100">
                            <template #default="scope">
                                <el-tag :type="scope.row.status == 1 ? 'success' : 'danger'">
                                    {{ scope.row.status == 1 ? '启用' : '禁用' }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="180" fixed="right">
                            <template #default="scope">
                                <el-button 
                                    type="primary" 
                                    size="small" 
                                    @click="router.push({path:'/main/pickup/edit/' + scope.row.id})">
                                    <el-icon><Edit /></el-icon>
                                    编辑
                                </el-button>
                                <el-button 
                                    type="danger" 
                                    size="small" 
                                    @click="pickupRemove(scope.row)">
                                    <el-icon><Delete /></el-icon>
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div class="pagination-container">
                        <el-pagination
                            v-model:current-page="page.current"
                            v-model:page-size="page.item_num"
                            :total="page.item_total"
                            :page-sizes="[10, 20, 50, 100]"
                            layout="total, sizes, prev, pager, next, jumper"
                            @current-change="handleCurrentChange"
                            @size-change="handleSizeChange"
                        />
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Plus, Refresh, Filter, Edit, Delete } from '@element-plus/icons-vue';

const VITE_URL = window.VITE_URL;
const router = useRouter();

const filter = ref({
    name: '',
    status: '',
});

const page = ref({
    total: 0,
    item_total: 0,
    item_num: 10,
    current: 1,
});

const pickupList = ref<any[]>([]);

// 计算显示的列表数据
const displayList = computed(() => {
    const start = (page.value.current - 1) * page.value.item_num;
    const end = start + page.value.item_num;
    return pickupList.value.slice(start, end);
});

// 搜索
const search = () => {
    page.value.current = 1;
    getList();
};

// 获取列表
const getList = () => {
    let url = VITE_URL + '/admin.pickup/index';
    const params: any = {};

    if (filter.value.name) {
        params.name = filter.value.name;
    }
    if (filter.value.status !== '') {
        params.status = filter.value.status;
    }

    axios.get(url, { params }).then((res: any) => {
        pickupList.value = res.data.list;
        page.value.item_total = res.data.page.total;
        page.value.total = Math.ceil(page.value.item_total / page.value.item_num);
    });
};

// 删除自提点
const pickupRemove = (pickup: any) => {
    ElMessageBox.confirm(
        `确定要删除自提点"${pickup.name}"吗？`,
        '删除确认',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        const url = VITE_URL + '/admin.pickup/remove';
        const data = 'id=' + pickup.id;

        axios.post(url, data).then((res: any) => {
            if (res.data.status == 0) {
                ElMessage.success('删除成功');
                getList();
            } else {
                ElMessage.error(res.data.description || '删除失败');
            }
        });
    }).catch(() => {
        // 取消删除
    });
};

// 页码改变
const handleCurrentChange = (val: number) => {
    page.value.current = val;
};

// 每页数量改变
const handleSizeChange = (val: number) => {
    page.value.item_num = val;
    page.value.total = Math.ceil(page.value.item_total / page.value.item_num);
    page.value.current = 1;
};

onMounted(() => {
    getList();
});
</script>

<style scoped>
.pickup-list {
    padding: 20px;
}

.page-header {
    margin-bottom: 20px;
}

.content-container {
    display: flex;
    gap: 20px;
}

.filter-panel {
    width: 300px;
    flex-shrink: 0;
}

.table-panel {
    flex: 1;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
</style>
